<template>
	<view class="conter">
		<view class="statistical_box">
			<view class="number">统计详情</view>
			<!-- 市值 -->
		<!-- 	<view style="margin-bottom: 15rpx;">
				<view class="market_value">
					<view class="image_box">
						<u--image width="80rpx" height="80rpx" src="../../static/images/shizi.png"></u--image>
					</view>
					<view class="value_box" style="margin-top: 10rpx;">
						<view>
							Duck市值
						</view>
						<view style="margin-top: 5rpx;">
							{{ thousandSign2(times_num) }}
						</view>
					</view>
				</view>
				<view class="charts_box">
					<qiun-data-charts type="column" :opts="opts_times" :chartData="chartData_times" />
				</view>
			</view> -->
			<!-- 市值 -->
			<!-- duck数量 -->
			<view style="margin-bottom: 15rpx;">
				<view class="market_value">
					<view class="image_box">
						<u--image width="80rpx" height="80rpx" src="../../static/images/suklaing.png"></u--image>
					</view>
					<view class="value_box" style="margin-top: 10rpx;">
						<view>
							Duck数量
						</view>
						<view style="margin-top: 5rpx;">
							{{ thousandSign2(mon_num) }}
						</view>
					</view>
				</view>
				<view class="charts_box">
					<qiun-data-charts type="column" :opts="opts_mon" :chartData="chartData_mon" />
					<!-- <qiun-data-charts type="area" :opts="opts_mon" :chartData="chartData_mon" /> -->
				</view>
			</view>
			<!-- duck数量 -->
			<!-- 总用户数量 -->
	<!-- 		<view style="margin-bottom: 15rpx;">
				<view class="market_value">
					<view class="image_box">
						<u--image width="80rpx" height="80rpx" src="../../static/images/yonghu.png"></u--image>
					</view>
					<view class="value_box" style="margin-top: 10rpx;">
						<view>
							总用户数量
						</view>
						<view style="margin-top: 5rpx;">
							{{ thousandSign2(user_num) }}
						</view>
					</view>
				</view>
				<view class="charts_box">
					<qiun-data-charts type="area" :opts="opts_user" :chartData="chartData_user" />
				</view>
			</view> -->
			<!-- 总用户数量 -->
			<!-- 金币数量 -->
<!-- 			<view style="margin-bottom: 15rpx;">
				<view class="market_value">
					<view class="image_box">
						<u--image style="margin-left: 5rpx;" width="70rpx" height="70rpx"
							src="../../static/images/crazy/jinbi.png"></u--image>
					</view>
					<view class="value_box">
						<view>
							金豆数量
						</view>
						<view style="margin-top: 5rpx;">
							{{ getSendTimrrrCount.count }}
						</view>
					</view>
				</view>
				<view class="charts_box">
					<image style="
					width: 280rpx;
					height: 280rpx;
					margin: 0 200rpx 0;
					" src="../../static/images/fighting.gif" mode=""></image>
				</view>
			</view> -->
			<!-- 金币数量 -->
		</view>
	</view>
</template>

<script>
	import config from '@/config.js';
	import {
		getMonLine,
		getTimesLine,
		getSendTimesCount,
		getTimesStat,
		getMonStat
	} from '../../api/work/market.js';
	export default {
		data() {
			return {
				imgUrl: config.imgUrl,
				allCount: 0,
				monList: [],
				specialList: [],
				getSpecialsList: [],
				imgUrl: config.gillUrl,
				chartData_times: {},
				times_line: [],
				times_num: 0,
				chartData_mon: {},
				mon_line: [],
				user_line: [],
				chartData_user: {},
				getSendTimrrrCount: {},
				user_num: 0,
				mon_num: 0,
				day: '',
				TimeSandsRecord: [],
				// opts_mon: {
				// 	color: ['#D65FE1'],
				// 	enableScroll: false,
				// 	dataLabel: false,
				// 	legend: {
				// 		show: false
				// 	},
				// 	xAxis: {
				// 		disabled: true,
				// 		axisLine: false,
				// 		disableGrid: true
				// 	},
				// 	yAxis: {
				// 		disabled: true,
				// 		disableGrid: true,
				// 		min: 0
				// 	},
				// 	extra: {
				// 		tooltip: {
				// 			gridType: 'dash',
				// 			legendShape: 'circle'
				// 		},
				// 		area: {
				// 			type: 'curve',
				// 			opacity: 0.2,
				// 			gradient: false,
				// 			addLine: true,
				// 			width: 3.5,
				// 			activeType: 'hollow'
				// 		},
				// 	}
				// },
				opts_user: {
					color: ['#DFBF3C'],
					enableScroll: false,
					dataLabel: false,
					legend: {
						show: false
					},
					xAxis: {
						disabled: true,
						axisLine: false,
						disableGrid: true
					},
					yAxis: {
						disabled: true,
						disableGrid: true,
						min: 0
					},
					extra: {
						tooltip: {
							gridType: 'dash',
							legendShape: 'circle'
						},
						area: {
							type: 'curve',
							opacity: 0.2,
							gradient: false,
							addLine: true,
							width: 3.5,
							activeType: 'hollow'
						}
					}
				},
				// 市值
				opts_mon: {
					color: ["#5552FF", "#5552FF"],
					enableScroll: false,
					legend: {
						show: false
					},
					xAxis: {
						disabled: true,
						axisLine: false,
						disableGrid: true
					},
					yAxis: {
						disabled: true,
						disableGrid: true,
					},
					extra: {
						column: {
							type: "group",
							width: 30,
							activeBgColor: "#000000",
							activeBgOpacity: 0.08,
							barBorderCircle: true,
							linearType: "custom"
						}
					}
				},
				chartData_stat: {},
				// 金豆
				opts_stat: {
					color: ['#1890FF',],
					enableScroll: false,
					dataLabel: false,
					legend: {},
					xAxis: {
						disabled: true,
						axisLine: false,
						disableGrid: true
					},
					yAxis: {
						disabled: true,
						disableGrid: true,
						data: [{
								position: 'left',
								min: 0
							},
							{
								position: 'left',
								min: 0
							}
						]
					},
					extra: {
						mix: {
							column: {},
							line: {}
						}
					}
				}
			};
		},
		async mounted() {
			await this.setMon();
			await this.setUser();
			await this.setTimes();
			await this.setTimesStat();
		},
		created() {
			this.getSendTiCount();
		},

		methods: {
			gospecial() {
				this.onShow = true;
				// uni.setStorageSync('specialIndex', 10);
			},
			thousandSign2(num) {
				return (num + '').replace(/\d(?=(\d{3})+$)/g, '$&,');
			},
			//沙沙数量
			async getSendTiCount() {
				const res = await getSendTimesCount();
				this.getSendTimrrrCount = res.data;
			},
			async setMon() {
				const res = await getMonLine(30);
				res.data[0].forEach((item) => {
					this.mon_line.push(item);
				});
				res.data[1].forEach((item) => {
					this.user_line.push(item);
				});
				this.user_num = this.user_line[this.user_line.length - 1];
				this.mon_num = this.mon_line[this.mon_line.length - 1];
				const indexArray = this.mon_line.map((i, index) => index);
				let data_mon = {
					categories: [...indexArray],
					series: [{
						name: '',
						data: [...this.mon_line],
						pointShape: 'none',
						legendShape: 'none',
					}]
				};
				this.chartData_mon = JSON.parse(JSON.stringify(data_mon));
			},
			async setTimesStat() {
				//获取时之沙的价格统计数据 带成交量
				const res = await getTimesStat();
				const dealNum = res.data.dealNum;
				const price = res.data.price;
				const indexArray = dealNum.map((i, index) => index);
				let data_stat = {
					categories: [...indexArray],
					series: [{
							name: '成交量',
							type: 'column',
							data: [...dealNum],
							pointShape: 'none',
							legendShape: 'square'
						},
						{
							name: '成交价格',
							type: 'line',
							index: 1,
							color: '#2fc25b',
							data: [...price],
							pointShape: 'none',
							legendShape: 'triangle'
						}
					]
				};
				this.chartData_stat = JSON.parse(JSON.stringify(data_stat));
			},
			async setUser() {
				const indexArray = this.user_line.map((i, index) => index);
				let data_user = {
					categories: [...indexArray],
					series: [{
						name: '',
						data: [...this.user_line],
						pointShape: 'none',
						legendShape: 'none'
					}]
				};
				this.chartData_user = JSON.parse(JSON.stringify(data_user));
			},
			// 市值折线图
			async setTimes() {
				const res = await getMonStat();
				res.data.forEach((item) => {
					this.times_line.push(item);
				});
				this.times_num = this.times_line[this.times_line.length - 1];
				const indexArray = this.times_line.map((i, index) => index);
				let data_times = {
					categories: [...indexArray],
					series: [{
						name: '',
						data: [...this.times_line],
						pointShape: 'none',
						legendShape: 'none'
					}]
				};
				this.chartData_times = JSON.parse(JSON.stringify(data_times));
			}
		}
	};
</script>
<style scoped lang="less">
	.conter {
		padding: 10rpx 22rpx;

		.statistical_box {
			width: 710rpx;
			padding: 27rpx;
			margin-bottom: 20rpx;
			background: #15132a;
			border-radius: 14rpx;
			box-shadow: 0rpx 4rpx 10rpx 0rpx rgba(0, 0, 0, 0.302);

			.number {
				color: #fff;
				font-size: 35rpx;
				font-weight: 800;
				font-family: "font";
				margin-bottom: 27rpx;
			}

			.image_box {
				width: 80rpx;
				height: 80rpx;
			}

			.market_value {
				display: flex;
				margin-left: 20rpx;
				align-items: center;

				.value_box {
					color: #fff;
					font-weight: 500;
					font-size: 24rpx;
					font-family: "font";
					margin-left: 34.88rpx;
				}
			}

			.charts_box {
				width: 680rpx;
				height: 280rpx;
				margin-top: 20rpx;
			}
		}

	}
</style>